<template>
	<view class="content">
		<view class="con-top">{{title}}</view>
		<image src="../../static/icon/bg.png" style="width: 70px;height: 70px;margin: 10px 0 ;"></image>
		<view class="con-mid">
			<view class="mid-top">
				<view>HOUR</view>
				<view>MIN</view>
				<view>SEC</view>
			</view>
			<view class="mid-main">
				<view>{{formattedHours}}:{{formattedMinutes}}:{{formattedSeconds}}</view>
			</view>
		</view>
		<view class="con-btm" v-if="isShow"> 
			<view class="btm-text">恭喜你，任务完成！</view>
			<view class="btn">
				<view @click="cancel" style="background-color: #fff;color: #8b5838;padding: 10rpx 90rpx;border-radius: 6rpx;">返回</view>
				<view @click="confirm" style="background-color: #8b5838;padding: 10rpx 60rpx;border-radius: 6rpx;margin: 0 0 0 20rpx;">再来一次</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				hours: 0,
				minutes: 0,
				seconds: 60,
				timer: null,
				isShow: false,
				list:[],
				option:{}
			};
		},
		computed: {
			// 格式化小时  
			formattedHours() {
				return this.hours.toString().padStart(2, '0');
			},
			// 格式化分钟  
			formattedMinutes() {
				return this.minutes.toString().padStart(2, '0');
			},
			// 格式化秒  
			formattedSeconds() {
				return this.seconds.toString().padStart(2, '0');
			},
		},
		onLoad(option) {
			if (option) {
				this.option = option
				this.list = uni.getStorageSync('report')
				this.title = this.list[option.index].title
			}
			this.startCountdown()
		},
		onUnload() {
			// 页面卸载时清除定时器  
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onHide() {
	
		},
		methods: {
			// 开始倒计时  
			startCountdown() {
				if (this.timer) {
					// 如果定时器已经存在，则先清除  
					clearInterval(this.timer);
				}
				let totalSeconds = this.hours * 3600 + this.minutes * 60 + this.seconds; // 总秒数  
				this.timer = setInterval(() => {
					totalSeconds--;
					this.hours = Math.floor(totalSeconds / 3600);
					this.minutes = Math.floor((totalSeconds % 3600) / 60);
					this.seconds = totalSeconds % 60;

					if (totalSeconds <= 0) {
						// 倒计时结束后的操作  
						clearInterval(this.timer);
						uni.showToast({
							title: '倒计时结束',
							icon: 'none'
						});
						// 更新报告数据
						this.list[this.option.index].value++
						console.log(88888888,this.list)
						//存缓存
						uni.setStorageSync(
							"report",
							this.list
						);
						this.isShow = true
					}
				}, 1000);
			},
			// 重置倒计时（可选）  
			confirm() {
				this.isShow=false
				this.hours = 0;
				this.minutes = 0;
				this.seconds = 60;
				this.startCountdown()
			},
			cancel(){
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.con-top {
			color: #9e9d9e;
		}

		.con-mid {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx;

			.mid-top {
				color: #6d6d6d;
				display: flex;
				font-size: 10px;
				justify-content: space-around;
			}

			.mid-main {
				color: #c14e4e;
				font-size: 45px;
			}
		}
		
		.con-btm{
			
			.btm-text{
				margin: 10rpx 0;
			}
			
			.btn{
				display: flex;
				justify-content: center;
				margin: 20rpx 0;
			}
		}
	}
</style>